<template>
  <div class="business">
    <div class="headerBackground" v-if="storeInfo">
      <div class="title">
        <span class="iconfont icon-left gobackIcon" @click="()=>{this.$router.go(-1)}"></span>
        <p>{{storeInfo.storeName}}</p>
        <span class="iconfont icon-fenxiang3 rightIcons" @click="share()"></span>
      </div>
      <div class="businessInfoCard">
        <div class="container">
          <div class="leftImage">
            <img :src="storeInfo.storeLogo" alt />
          </div>
          <div class="centerInfo">
            <p>{{storeInfo.storeName}}</p>
            <p>{{storeInfo.mobile}}</p>
          </div>
          <div class="rightIcon"></div>
        </div>
        <div class="headerBottomText">
          <p>商家简介:{{storeInfo.description}}</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="commodityList" v-if="commodity">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-card
            v-for="item in commodity"
            :key="item.id"
            :num="item.stock"
            :price="item.retailPrice"
            :origin-price="item.originPrice"
            :title="item.intro"
            @click="()=>{$router.push({path:'/commodityDetails',query:{id:item.id}})}"
          >
            <div slot="desc" class="commodityDesc">
              <p>{{item.productName}}</p>
            </div>
            <div slot="thumb" class="commodityImg">
              <img :src="item.mainImage" alt />
            </div>
          </van-card>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
// import wx from "weixin-js-sdk";
export default {
  data: () => ({
    storeInfo: null,
    commodity: [],
    loading: false,
    finished: false,
    limit: 10,
    page: 1
  }),
  computed: {
    userInfo() {
      return JSON.parse(this.$store.state.memberInfo);
    }
  },
  created() {
    this.$axios
      .notLoggedIn(`ym/mall-online-merchant/store?id=${this.$route.query.id}`)
      .then(res => {
        //console.log(res);
          this.storeInfo = res
      });
  },
  methods: {
    onLoad() {
      this.getCommodityList();
    },
    getCommodityList() {
      this.$axios
        .notLoggedIn(
          `ym/mall-online-merchant/product-list?id=${this.$route.query.id}&limit=${this.limit}&page=${this.page}`
        )
        .then(res => {
          //console.log(res)
            let pageInfo = res.records;
            if (pageInfo.length > 0) {
              pageInfo.forEach(msg => {
                this.commodity.push(msg);
              });
              this.limit += 5;
              this.page += 1;
              this.loading = false;
            } else {
              this.finished = true;
            }
        });
    },
    share() {
      let _this = this;
      try {
        this.$store.state.nativeShare.setShareData({
          icon:this.storeInfo.storeLogo,
          link:`http://www.ym718.com/#/?code=${_this.userInfo.referralCode}`,
          title: this.storeInfo.storeName,
          desc: '圆梦网络',
          from: "@fa-ge"
        });
        this.$store.state.NativeShare.call("wechatFriend");
      } catch (err) {
        // 如果不支持，你可以在这里做降级处理
        alert('抱歉,您当前使用的浏览器不支持分享!')
      }
      // this.$axios.get(`ym/public/wechat-share`).then(res => {
      //   wx.config({
      //     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      //     appId: res.data.appid, // 必填，公众号的唯一标识
      //     timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      //     nonceStr: res.data.noncestr, // 必填，生成签名的随机串
      //     signature: res.data.signature, // 必填，签名
      //     jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
      //   });
      // });
      // wx.ready(function() {
      //   //console.log("wx : success");
      // });
      // setTimeout(() => {
      //   wx.updateAppMessageShareData({
      //     title: _this.storeInfo.storeName, // 分享标题
      //     desc: "圆梦网络", // 分享描述
      //     link: `http://www.ym718.com/#/?code=${_this.userInfo.referralCode}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //     imgUrl: _this.storeInfo.storeLogo, // 分享图标
      //     success: function() {
      //       // 设置成功
      //       _this.$Toast("点击右上角进行分享");
      //     }
      //   });
      //   wx.updateTimelineShareData({
      //     title: _this.storeInfo.storeName, // 分享标题
      //     link: `http://www.ym718.com/#/?code=${_this.userInfo.referralCode}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //     imgUrl: _this.storeInfo.storeLogo, // 分享图标
      //     success: function() {
      //       // 设置成功
      //       // alert("点击右上角分享-朋友圈");
      //     }
      //   });
      // }, 2000);
    }
  }
};
</script>
<style lang="scss" scoped>
.business {
  width: 100%;
  height: 100%;
  .headerBackground {
    background: url("https://gve.oss-cn-beijing.aliyuncs.com/2020/02/04/1580804814685.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    .title {
      margin: 0;
      padding: 10px 0;
      color: #fff;
      .gobackIcon {
        border: 1px solid #0cbccb;
        position: absolute;
        left: 10px;
      }
      .rightIcons {
        border: 1px solid #0cbccb;
        position: absolute;
        font-size: 20px;
        right: 10px;
        top: 10px;
      }
      p {
        margin: 0;
        padding: 0;
        text-align: center;
      }
    }
    .businessInfoCard {
      height: 180px;
      width: 90%;
      background: #fff;
      position: absolute;
      bottom: -40px;
      border-radius: 10px;
      .container {
        display: flex;
        height: 100px;
        padding: 16px;
        padding-bottom: 0;
        .leftImage {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 70%;
            height: 70%;
          }
        }
        .centerInfo {
          width: 100%;
          color: #0cbccb;
          font-size: 14px;
          padding: 16px 0;
          display: inline-block;
          p {
            margin: 5px 0;
            padding: 0;
          }
        }
        .rightIcon {
          width: 100%;
          padding: 16px 0;
          position: relative;
          img {
            width: 20px;
            height: 20px;
            position: absolute;
            right: 0;
            top: 0;
          }
        }
      }
      .headerBottomText {
        font-size: 12px;
        padding: 0 20px;
        color: #0cbccb;
      }
    }
  }
  .content {
    position: relative;
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    .commodityList {
      width: 90%;
      height: 75%;
      .commodityDesc {
        margin-top: 20px;
        p {
          margin: 0;
        }
      }
      .commodityImg {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 80%;
          height: 80%;
        }
      }
    }
  }
}
</style>